<template>
	<view class="goods-detail">
		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500"
				circular="true">
				<swiper-item v-for="(banner, index) in bannersList" :key="index">
					<image :src="banner" mode="aspectFill" class="banner-image"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品基本信息 -->
		<view class="goods-info">
			<view class="price-section">
				<text class="current-price">¥{{ (originprice * discount / 10).toFixed(2) }}</text>
				<text class="original-price" v-if="discount < 10">¥{{ originprice }}</text>
				<text class="discount-tag" v-if="discount < 10">{{ discount }}折</text>
			</view>

			<view class="goods-title">
				<text class="proname">{{ proname }}</text>
				<text class="category">分类：{{ category }}</text>
				<text class="brand">品牌：{{ brand }}</text>
			</view>

			<view class="sales-stock">
				<text class="sales">已售 {{ sales }} 件</text>
				<text class="stock">库存 {{ stock }} 件</text>
			</view>
		</view>

		<!-- 商品描述 -->
		<view class="goods-desc">
			<view class="desc-title">商品详情</view>
			<view class="desc-content">
				<text>{{ desc }}</text>
			</view>
		</view>

		<!-- 商品图片 -->
		<view class="goods-images">
			<view class="images-title">商品图片</view>
			<view class="images-grid">
				<image v-for="(img, index) in imgs" :key="index" :src="img" mode="aspectFill" class="detail-image"
					@click="previewImage(img)"></image>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="actions-icons">
				<view class="cart-icon-box" @click="goToCart">
					<up-badge numberType="ellipsis" type="error" :absolute="true" max="99" :value="cartNum"
						:offset="[-5,-10]"></up-badge>
					<u-icon name="shopping-cart" size="30" class="cart-icon"></u-icon>
				</view>
			</view>
			<view class="action-buttons" v-if="issale === 1">
				<button class="cart-btn" @click="addToCart">加入购物车</button>
				<button class="buy-btn" @click="buyNow">立即购买</button>
			</view>
			<view class="action-buttons" v-if="issale !== 1">
				<button class="buy-btn" disabled type="warn">商品已下架</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import http from '/utils/request.js'
	import {
		useCartStore
	} from '../../stores/cart'

	const proid = ref('')
	const goodsInfo = ref({})
	const cartStore = useCartStore()

	const cartNum = computed(() => cartStore.totalCartNum);

	const bannersList = computed(() => {
		if (goodsInfo.value.banners) {
			return goodsInfo.value.banners[0] ? goodsInfo.value.banners[0].split(',') : []
		}
		return []
	})

	const imgs = computed(() => {
		return goodsInfo.value.imgs || []
	})

	const originprice = computed(() => {
		return goodsInfo.value.originprice || 0
	})

	const discount = computed(() => {
		return goodsInfo.value.discount || 10
	})

	const proname = computed(() => {
		return goodsInfo.value.proname || ''
	})

	const category = computed(() => {
		return goodsInfo.value.category || ''
	})

	const brand = computed(() => {
		return goodsInfo.value.brand || ''
	})

	const sales = computed(() => {
		return goodsInfo.value.sales || 0
	})

	const stock = computed(() => {
		return goodsInfo.value.stock || 0
	})

	const desc = computed(() => {
		return goodsInfo.value.desc || ''
	})

	const issale = computed(() => {
		return goodsInfo.value.issale || 0
	})

	async function getGoodsDetail(proid) {
		try {
			if (!proid) {
				uni.showToast({
					title: '商品ID不存在',
					icon: 'none'
				})
				return
			}

			const res = await http.get(`/pro/detail/${proid}`)

			if (res && res.code === '200') {
				goodsInfo.value = res.data
			} else {
				throw new Error(res.message || '获取商品详情失败')
			}
		} catch (err) {
			console.error('获取商品详情错误:', err)
			uni.showToast({
				title: err.message || '获取商品详情失败',
				icon: 'none'
			})
		}
	}

	function previewImage(current) {
		uni.previewImage({
			current: current,
			urls: imgs.value
		})
	}

	async function addToCart() {
		const success = await cartStore.addToCart(proid.value, 1)
		if (success) {
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			})
		}
	}

	function buyNow() {
		uni.showToast({
			title: '跳转到购买页面',
			icon: 'none'
		})
		console.log('立即购买:', goodsInfo.value)
	}

	function goToCart() {
		uni.switchTab({
			url: '/pages/cart/cart'
		})
	}

	onPullDownRefresh(async () => {
		const proid = proid.value
		await getGoodsDetail((proid) => {
			uni.stopPullDownRefresh()
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		})
	})

	onLoad((options) => {
		if (options && options.proid) {
			proid.value = options.proid
			getGoodsDetail(proid.value)
		} else {
			uni.showToast({
				title: '商品ID不能为空',
				icon: 'none'
			})
		}
	})
</script>

<style lang="scss">
	.goods-detail {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.banner-section {
		background-color: white;
	}

	.banner-swiper {
		height: 500rpx;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.goods-info {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.price-section {
		display: flex;
		align-items: baseline;
		margin-bottom: 20rpx;
	}

	.current-price {
		font-size: 48rpx;
		color: #ff4757;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.original-price {
		font-size: 28rpx;
		color: #999;
		text-decoration: line-through;
		margin-right: 15rpx;
	}

	.discount-tag {
		background-color: #ff4757;
		color: white;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.goods-title {
		margin-bottom: 20rpx;
	}

	.proname {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.category,
	.brand {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 5rpx;
	}

	.sales-stock {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #666;
	}

	.goods-desc {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.desc-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.desc-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}

	.desc-content text {
		word-break: break-all;
	}

	.goods-images {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.images-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.images-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;
	}

	.detail-image {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.bottom-bar {
		position: fixed;
		bottom: -1rpx;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10rpx;
	}

	.actions-icons {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: center;
	}

	.cart-icon-box {
		position: relative;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
		width: 70%;
	}

	.cart-btn,
	.buy-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		border: none;
	}

	.cart-btn {
		background-color: #ffa502;
		color: white;
	}

	.buy-btn {
		background-color: #ff4757;
		color: white;
	}
</style>